<template>
  <div>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" width="80%" center @close="onDialogClose">
      <img :src="currentImage" alt="放大后的图片" class="enlarged-photo" />
    </el-dialog>






    <el-descriptions
    title="Width vertical list"
    direction="vertical"
    border
    style="margin-top: 20px"
  >
  
    <el-descriptions-item
      :rowspan="2"
      :width="140"
      label="Photo"
      align="center"
    >
      <el-image
        style="width: 100px; height: 100px"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </el-descriptions-item>
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions>





    <!-- 店铺信息列表 -->
    <el-row :gutter="20" type="flex" justify="space-around">
      <el-col
        v-for="(shopItem, index) in shopList"
        :key="index"
        :span="8"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="6"
        style="margin-bottom: 20px;"
      >
        <el-card class="box-card">
          <div slot="header" class="card-header">
            <span>店铺信息详情</span>
          </div>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="店铺名称">{{ shopItem.shopName }}</el-descriptions-item>
            <el-descriptions-item label="店铺地址(经纬度)">{{ shopItem.shopAddress }}</el-descriptions-item>
            <el-descriptions-item label="店铺电话">{{ shopItem.shopPhone }}</el-descriptions-item>
            <el-descriptions-item label="营业执照">{{ shopItem.shopLicense }}</el-descriptions-item>
            <el-descriptions-item label="店铺评分">{{ shopItem.shopIntegral }}</el-descriptions-item>
            <el-descriptions-item label="店铺营业时间">{{ shopItem.businessHours }}</el-descriptions-item>
            <el-descriptions-item label="店铺头像">
              <img :src="shopItem.shopImage" alt="店铺头像" style="max-width:30px;" />
            </el-descriptions-item>
            <el-descriptions-item label="图片详情">
              <img :src="shopItem.shopPoto" alt="图片详情" style="max-width:30px;" @click="showImage(shopItem.shopPoto)" />
            </el-descriptions-item>
            <el-descriptions-item label="店铺描述">{{ shopItem.shopDescription }}</el-descriptions-item>
            <el-descriptions-item label="店铺服务范围描述">{{ shopItem.serviceDescription }}</el-descriptions-item>
          </el-descriptions>
          <!-- 按钮组 -->
          <div class="button-group">
            <el-button type="primary" @click="viewShopServices(shopItem)">查看商家服务</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ShopInfo',
  data() {
    return {
      PageForm: {
        pageNum: 1,
        pageSize: 20
      },
      shopList: [], // 用于存储多个店铺信息
      dialogVisible: false,
      currentImage: '',
      FindServiceUserForm: {
        shopId: null,
        serviceName: null,
        serviceCategoryId: null,
        state: null,
        servicePrice: "",
        pageForm: {
          pageNum: 1,
          pageSize: 20
        }
      },
      shopService: [],
      isShow: false,
      carList:[],
      SelectCarInfoForm:{
      },
    };
  },
  methods: {


    // 格式化价格方法
    formatPrice(value) {
      if (value !== undefined && value !== null) {
        return `￥${parseFloat(value).toFixed(2)}`;
      }
      return 'N/A';
    },

    // 格式化日期方法
    formatDate(date) {
      if (date) {
        return new Date(date).toLocaleString();
      }
      return 'N/A';
    },

    // 构建查询参数
    buildParams() {
      return {
        ...this.FindServiceUserForm.pageForm,
        shopId: this.FindServiceUserForm.shopId,
        serviceName: this.FindServiceUserForm.serviceName,
        serviceCategoryId: this.FindServiceUserForm.serviceCategoryId,
        state: this.FindServiceUserForm.state,
        servicePrice: this.FindServiceUserForm.servicePrice
      };
    },

 
    // JSON 解析方法，带错误处理
    parseJson(str, defaultValue) {
      try {
        return Array.isArray(str) ? str : JSON.parse(str);
      } catch (e) {
        console.warn('Failed to parse JSON:', str, e);
        return defaultValue;
      }
    },

    // 查看商家服务
    viewShopServices(shopItem) {
      this.AddNewOrderForm.shopId= shopItem.shopId;
      this.isShow = true;
      this.FindServiceUserForm.shopId = shopItem.shopId;
      this.findServiceByShopIdUser();
    },

    // 展示图片
    showImage(imageSrc) {
      this.currentImage = imageSrc;
      this.dialogVisible = true;
    },

    // 关闭对话框时触发
    onDialogClose() {
      this.currentImage = '';
    },

    // 获取店铺信息列表
    getShopInfoList() {
      this.$http.post("/market/shopInfo/getShopInfoList", this.PageForm)
        .then(resp => {
          this.shopList = resp.data.data.list || []; // 确保返回的是数组
          console.log(this.shopList);
        })
        .catch(error => {
          console.error('Error fetching shop info list:', error);
        });
    }
  },
  created() {
    this.getShopInfoList();
  }
};
</script>

<style scoped>
/* 自定义样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  text-align: right;
  margin-top: 10px;
}

.el-descriptions-item__label {
  font-weight: bold;
}

.el-descriptions-item__content {
  word-break: break-all;
}

.enlarged-photo {
  max-width: 100%;
  max-height: 80vh;
  margin: auto;
  display: block;
}

.box-card {
  height: 100%;
  transition: transform 0.2s;
}

.box-card:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .el-col {
    margin-bottom: 20px;
  }
}
</style>